<template>
	<div class="addCustomer">
		<el-divider content-position="left">
			<el-link type="primary">基本资料</el-link>
		</el-divider>
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" :disabled="type=='查看'">
			<el-row>
				<el-col :span="12">
					<el-form-item name="报价单号" :label="computeInputBox('quotationNo','label')" :prop="computeInputBox('quotationNo','isInput')" v-if="computeInputBox('quotationNo','show')">
						<el-input class="lz-el-input" v-model="ruleForm.quotationNo" disabled :size="size"></el-input>
					</el-form-item>
					<el-form-item name="报价负责人" :label="computeInputBox('quotationUser','label')" :prop="computeInputBox('quotationUser','isInput')" v-if="computeInputBox('quotationUser','show')">
						<el-input class="lz-el-input" v-model="ruleForm.quotationUser" :maxlength="20" :disabled="computeInputBox('quotationUser','disabled')" :size="size"></el-input>
					</el-form-item>
					<el-form-item name="供应商编号" :label="computeInputBox('supplierNo','label')"
						:prop="computeInputBox('supplierNo','isInput')" v-if="computeInputBox('supplierNo','show')">
						<div style="display: flex;width: 200px;">
							<el-input @focus="focusFn" v-model="ruleForm.supplierNo" :size="size"
								suffix-icon="el-icon-arrow-down" style="width: 120px;margin-right: 5px;"></el-input>
							<el-input :value="ruleForm.supplierCname" :size="size" disabled></el-input>
						</div>
					</el-form-item>
					<el-form-item name="结算方式" :label="computeInputBox('settleNo','label')" :prop="computeInputBox('settleNo','isInput')" v-if="computeInputBox('settleNo','show')">
						<el-select v-model="ruleForm.settleNo" placeholder="请选择" :size="size"
							clearable class="lz-el-select" :disabled="computeInputBox('settleNo','disabled')">
							<el-option v-for="item in settleNoList" :key="item.id" :label="item.settleName"
								:value="item.settleNo"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item name="付款方式" :label="computeInputBox('payNo','label')" :prop="computeInputBox('payNo','isInput')" v-if="computeInputBox('payNo','show')">
						<el-select v-model="ruleForm.payNo" placeholder="请选择" :size="size"
							clearable class="lz-el-select" :disabled="computeInputBox('payNo','disabled')">
							<el-option v-for="item in payNoList" :key="item.id" :label="item.payName"
								:value="item.payNo"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item name="采购报价单" :label="computeInputBox('referenceNo','label')" :prop="computeInputBox('referenceNo','isInput')" v-if="computeInputBox('referenceNo','show')">
						<el-input class="lz-el-input" v-model="ruleForm.referenceNo" :maxlength="30" :disabled="computeInputBox('referenceNo','disabled')" :size="size"></el-input>
					</el-form-item>
					<el-form-item name="报价公司" :label="computeInputBox('companyNo','label')" :prop="computeInputBox('companyNo','isInput')" v-if="computeInputBox('companyNo','show')">
						<el-select v-model="ruleForm.companyNo" placeholder="请选择" :size="size"
							clearable class="lz-el-select" :disabled="computeInputBox('companyNo','disabled')">
							<el-option v-for="item in companyNoList" :key="item.id" :label="item.companyName"
								:value="item.companyNo"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item name="币别" :label="computeInputBox('coin','label')" :prop="computeInputBox('coin','isInput')" v-if="computeInputBox('coin','show')">
						<el-select v-model="ruleForm.coin" placeholder="请选择" :size="size"
							clearable class="lz-el-select" :disabled="computeInputBox('coin','disabled')">
							<el-option v-for="item in coinList" :key="item.id" :label="item.coinName"
								:value="item.coinNo"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item name="税码" :label="computeInputBox('taxNo','label')" :prop="computeInputBox('taxNo','isInput')" v-if="computeInputBox('taxNo','show')">
						<el-select v-model="ruleForm.taxNo" placeholder="请选择" :size="size"
							clearable class="lz-el-select" :disabled="computeInputBox('taxNo','disabled')">
							<el-option v-for="item in taxNoList" :key="item.id" :label="item.taxName"
								:value="item.taxNo"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item name="报价日期" :label="computeInputBox('quotationDate','label')" :prop="computeInputBox('quotationDate','isInput')" v-if="computeInputBox('quotationDate','show')">
						<el-date-picker class="lz-el-select" v-model="ruleForm.quotationDate" type="datetime" placeholder="选择日期时间" :disabled="computeInputBox('quotationDate','disabled')"  :size="size"></el-date-picker>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="16">
					<el-form-item name="备注" :label="computeInputBox('note','label')" :prop="computeInputBox('note','isInput')" v-if="computeInputBox('note','show')">
						<el-input v-model="ruleForm.note" :maxlength="100" :disabled="computeInputBox('note','disabled')" :size="size"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-divider content-position="left">
				<el-link type="primary">参考报价明细</el-link>
			</el-divider>
			<el-row>
				<el-col :span="24">
					<addressList ref="addressList" @updataDataAddressList="updata_data_addressList"></addressList>
				</el-col>
			</el-row>
		</el-form>
		<!-- 供应商列表-->
		<SupplierNumber @submit="bindConfiguration" ref="SupplierNumber"></SupplierNumber>
	</div>
</template>

<script>
	let that
	import {
		mapGetters
	} from 'vuex'
	import lzRowCol from '@/components/lzRowCol/lzRowCol'
	import addressList from './addressList'//参考报价明细
	// 供应商列表
	import SupplierNumber from '@/components/SupplierNumber/SupplierNumber'
	export default {
		components: {
			lzRowCol,
			addressList,
			SupplierNumber
		},
		name: 'addCustomer',
		props: {
			type: {
				type: String,
				default: () => {
					return ''
				}
			},
		},
		computed: {
			...mapGetters(['size', 'themeBtColor', 'api','InputBoxList']),
			//计算出当前输入框配置信息
			computeInputBox(){
				return (field,type)=>{
					let arr=this.InputBoxList.find(item=>item.fieldName==field)
					if(arr&&type=='show'){
						return arr.isVisible==0?true:false//0为显示1为隐藏
					}
					if(arr&&type=='isInput'){
						return arr.isInput==0?field:''//0为必填1为不必填
					}
					if(arr&&type=='disabled'){
						return arr.isDisplay==0?true:false//0为只读1为可读写
					}
					if(arr&&type=='label'){
						return arr.fieldLabel//标签动态显示名称
					}
					return false
				}
			}
		},
		data() {
			return {
				settleNoList:[],//结算方式
				payNoList:[],//付款方式
				coinList:[],//币别列表
				taxNoList:[],//税码列表
				companyNoList:[],//报价公司列表
				ruleForm: {
					quotationNo: '', //报价单号
					quotationUser: '', //报价负责人
					supplierNo:'',//供应商编号
					settleNo: '', //结算方式
					payNo:'',//付款方式
					referenceNo: '', //采购报价单
					note: '', //备注
					companyNo: '', //报价公司
					quotationDate: '', //报价日期
					coin:'',//币别
					taxNo:'',//税码
				},
				rules: {
					supplierNo:[{
						required: true,
						message: '必填',
						trigger: 'blur'
					}],
					quotationNo:[{
						required: true,
						message: '必填',
						trigger: 'blur'
					}],
					quotationUser: [{
						required: true,
						message: '必填',
						trigger: 'blur'
					}],
					settleNo: [{
						required: true,
						message: '必填',
						trigger: 'blur'
					}],
					payNo: [{
						required: true,
						message: '必填',
						trigger: 'blur'
					}],
					referenceNo: [{
						required: true,
						message: '必填',
						trigger: 'blur'
					}],
					note: [{
						required: true,
						message: '必填',
						trigger: 'blur'
					}],
					companyNo: [{
						required: true,
						message: '必填',
						trigger: 'blur'
					}],
					quotationDate: [{
						required: true,
						message: '必填',
						trigger: 'blur'
					}],
					coin: [{
						required: true,
						message: '必填',
						trigger: 'blur'
					}],
					taxNo: [{
						required: true,
						message: '必填',
						trigger: 'blur'
					}],
				}
			}
		},
		mounted() {
			that = this
			//获取结算方式列表
			that.settlement_list()
			//获取付款方式
			that.payment_list()
			//获取币别
			that.coin_list()
			//获取税码
			that.tax_list()
			//获取公司
			that.company_list()
		},
		methods: {
			//获取公司
			company_list(){
				that.GLOBAL.doGet(that.api.GLOBAL_setting_company_list, {}, function(res) {
					if (res.code == 200) {
						that.companyNoList=res.result
					}
				});
			},
			//获取税码
			tax_list(){
				that.GLOBAL.doGet(that.api.GLOBAL_setting_tax_list, {}, function(res) {
					if (res.code == 200) {
						that.taxNoList=res.result
					}
				});
			},
			//获取币别
			coin_list(){
				that.GLOBAL.doGet(that.api.GLOBAL_setting_coin_list, {}, function(res) {
					if (res.code == 200) {
						that.coinList=res.result
					}
				});
			},
			//获取付款方式
			payment_list(){
				that.GLOBAL.doGet(that.api.GLOBAL_setting_payment_list, {}, function(res) {
					if (res.code == 200) {
						that.payNoList=res.result
					}
				});
			},
			//获取结算方式列表
			settlement_list(){
				that.GLOBAL.doGet(that.api.GLOBAL_setting_settlement_list, {}, function(res) {
					if (res.code == 200) {
						that.settleNoList=res.result
					}
				});
			},
			//获取到光标
			focusFn() {
				that.$refs.SupplierNumber.focusFn()
			},
			//弹框确定
			bindConfiguration(item) {
				that.ruleForm.supplierNo = item.supplierNo
				that.ruleForm.supplierCname = item.supplierCname
				that.ruleForm.settleNo=item.settleType
				that.ruleForm.payNo=item.paymentType
				that.ruleForm.taxNo=item.taxNo
				that.ruleForm.coin=item.coin
			},
			//获取到参考报价明细
			updata_data_addressList(data){
				that.ruleForm.quotationDetailList=data
			},
			//点击查看
			SeeRuleForm(row,text){
				//重置
				that.Reset()
				that.ruleForm=JSON.parse(JSON.stringify(row))
				that.$refs.addressList.SeeRuleForm(row)
			},
			//点击添加弹框确定
			determine() {
				that.$refs.ruleForm.validate((valid)=>{
					if (valid) {
						let req = {
							...that.ruleForm,
							quotationType:'01',//报价类型 01：采购报价单 02：销售报价单
						}
						that.GLOBAL.doPost(that.api.GLOBAL_quotation_quotation_add, req, function(res) {
							if (res.code == 200) {
								that.$message.success(res.message)
								that.$emit('success',true)
							}
						});
					} else {
						console.log('error submit!!');
						return false;
					}
				})
			},
			//客户编辑
			customer_edit(){
				that.$refs.ruleForm.validate((valid)=>{
					if (valid) {
						let req = {
							...that.ruleForm,
							quotationType:'01',//报价类型 01：采购报价单 02：销售报价单
						}
						that.GLOBAL.doPost(that.api.GLOBAL_quotation_quotation_edit, req, function(res) {
							if (res.code == 200) {
								that.$message.success(res.message)
								that.$emit('success',true)
							}
						});
					} else {
						console.log('error submit!!');
						return false;
					}
				})
				
			},
			//附件上传完成
			fileUploadData(data,text) {
				if(data.fileList.length>0){
					let req={
						url:data.fileList[0].url,
						name:data.fileList[0].name,
						uid:data.fileList[0].uid,
						type:data.fileList[0].raw.type,
						size:data.fileList[0].raw.size,
					}
					if(text=='产品图片'){
						that.ruleForm.productPicture=JSON.stringify(req)
					}
				}else{
					that.ruleForm.productPicture=''
				}
			},
			//重置
			Reset(){
				that.ruleForm={
					quotationNo: '', //报价单号
					quotationUser: '', //报价负责人
					supplierNo:'',//供应商编号
					settleNo: '', //结算方式
					payNo:'',//付款方式
					referenceNo: '', //采购报价单
					note: '', //备注
					companyNo: '', //报价公司
					quotationDate: '', //报价日期
					coin:'',//币别
					taxNo:'',//税码
				}
				that.$refs.ruleForm.resetFields();
				that.$refs.addressList.Reset()
			}
		}

	}
</script>

<style lang="scss" scoped>
	.addCustomer {
		.upload {
			display: flex;
			width: 100%;
			margin-bottom: 20px;
			box-sizing: border-box;
			.title {
				font-size: 14px;
				padding: 0 5px;
				padding: 5px;
				width: 100px;
			}
		}
	}
</style>
